<template>
  <view class="classlist">
    <!-- 正在加载样式图标 -->
    <view class="loadingLayout" v-if="!classList.length && !noData">
		<uni-load-more status="loading"></uni-load-more>
    </view>
    <!-- 中间展示内容，可以点击跳转到小说详情界面 -->
    <view class="content">
		<navigator :url="'/pages/book/book?novelId='+item.novelId+'&fromPage=classlist'" class="item" 
                 v-for="item in classList"
                 :key="item.novelId">
        <!-- 展示小说的图片位置 -->
        <image :src="`${BASE_URL}${item.coverImage}`" mode="aspectFill"></image>
        <!-- 修改：增加一个name，可以展示小说的名字 -->
        <view class="name">{{ item.title }}</view>
      </navigator>
    </view>
    <!-- 没有更多数据加载图标 -->
    <view class="loadingLayout" v-if="classList.length || noData">
      <uni-load-more :status="noData?'noMore':'loading'"></uni-load-more>
    </view>
    <view class="safe-area-inset-bottom"></view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
import {onLoad,onUnload,onReachBottom,onShareAppMessage,onShareTimeline} from "@dcloudio/uni-app"

import {apiGetClassList} from "@/api/apis.js"
import {gotoHome} from "@/utils/common.js"

import { BASE_URL } from '../../utils/request';
//分类列表数据
const classList = ref([]);
const noData = ref(false)

//定义data参数，默认初始值可以修改
const queryParams = {
  //页数
  pageNum:1,
  //一页个数
  pageSize:8
}
let pageName;

//可以直接获取上个分类的id
onLoad((e)=>{  
  //解构
  let {tagId=null,name=null} = e;
  // 通过url来解析传递的参数
  // 会自动创建classid
  if(tagId) queryParams.tagId = tagId;  
  pageName = name;
  //修改导航标题
  uni.setNavigationBarTitle({
    title:name
  })
  //执行获取分类列表方法
  getClassList();
})

//触底方法
onReachBottom(()=>{
  if(noData.value) return;
  //触底之后直接让页数++，展示下面的数据
  queryParams.pageNum++;
  getClassList();
})

//获取分类列表网络数据
const getClassList = async ()=>{
  let res;
  if(queryParams.tagId) res = await apiGetClassList(queryParams);
  console.log(queryParams.tagId);
  console.log(classList);
  //让新数据和老数据拼在一起，防止老数据被刷新
  classList.value = [...classList.value , ...res.data];
  //如果没有数据了
  if(queryParams.pageSize > res.data.length) noData.value = true; 
  uni.setStorageSync("storgClassList",classList.value);  
} 

onUnload(()=>{
  uni.removeStorageSync("storgClassList")
})

</script>

<style lang="scss" scoped>
.classlist {
  .content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 5rpx;
    padding: 5rpx;
    .item {
      height: 560rpx;
      width: 370rpx;
      display: flex;
      flex-direction: column;
      align-items: center;
      image {
        width: 160px;
        height: 220px;
        display: block;
		border-radius: 20px;
      }
      .name {
        margin-top: 10rpx;
        font-size: 28rpx;
        text-align: center;
        color: #333;
      }
    }
  }
}
</style>
